<template>
  <div class="dashboard">
    <a-card v-if="systemInfo" title="系统信息">
      <div class="attr">
        <span class="attr-name">系统版本:&nbsp;</span>
        <span class="attr-value">{{ systemInfo.version }}</span>
      </div>
      <div class="attr">
        <span class="attr-name">Go版本:&nbsp;</span>
        <span class="attr-value">{{ systemInfo.goVersion }}</span>
      </div>
      <div class="attr">
        <span class="attr-name">操作系统:&nbsp;</span>
        <span class="attr-value">{{ systemInfo.os }}</span>
      </div>
      <div class="attr">
        <span class="attr-name">架构:&nbsp;</span>
        <span class="attr-value">{{ systemInfo.arch }}</span>
      </div>
    </a-card>

    <!-- 用户活跃度分析 -->
    <a-card title="用户活跃度分析" class="dashboard-card">
      <div class="card-content">
        <div class="stat-item">
          <div class="stat-title">今日新增用户</div>
          <div class="stat-value">{{ userStats.todayNewUsers }}</div>
        </div>
        <div class="stat-item">
          <div class="stat-title">活跃用户数</div>
          <div class="stat-value">{{ userStats.activeUsers }}</div>
        </div>
        <div class="stat-item">
          <div class="stat-title">用户发帖数</div>
          <div class="stat-value">{{ userStats.todayPosts }}</div>
        </div>
      </div>
      <div class="chart-container">
        <v-chart class="chart" :option="userActivityOption" />
      </div>
    </a-card>

    <!-- 内容运营分析 -->
    <a-card title="内容运营分析" class="dashboard-card">
      <div class="card-content">
        <div class="stat-item">
          <div class="stat-title">今日发帖数</div>
          <div class="stat-value">{{ contentStats.todayPosts }}</div>
        </div>
        <div class="stat-item">
          <div class="stat-title">今日评论数</div>
          <div class="stat-value">{{ contentStats.todayComments }}</div>
        </div>
        <div class="stat-item">
          <div class="stat-title">今日点赞数</div>
          <div class="stat-value">{{ contentStats.todayLikes }}</div>
        </div>
      </div>
      <div class="chart-container">
        <v-chart class="chart" :option="contentTrendOption" />
      </div>
    </a-card>

    <!-- 系统运营分析 -->
    <a-card title="系统运营分析" class="dashboard-card">
      <div class="card-content">
        <div class="stat-item">
          <div class="stat-title">系统访问量</div>
          <div class="stat-value">{{ systemStats.visits }}</div>
        </div>
        <div class="stat-item">
          <div class="stat-title">平均响应时间</div>
          <div class="stat-value">{{ systemStats.avgResponseTime }}ms</div>
        </div>
        <div class="stat-item">
          <div class="stat-title">在线用户数</div>
          <div class="stat-value">{{ systemStats.onlineUsers }}</div>
        </div>
      </div>
      <div class="chart-container">
        <v-chart class="chart" :option="systemPerformanceOption" />
      </div>
    </a-card>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { use } from 'echarts/core';
import { CanvasRenderer } from 'echarts/renderers';
import { LineChart, PieChart, BarChart } from 'echarts/charts';
import {
  GridComponent,
  TooltipComponent,
  LegendComponent,
  TitleComponent,
} from 'echarts/components';
import VChart from 'vue-echarts';

use([
  CanvasRenderer,
  LineChart,
  PieChart,
  BarChart,
  GridComponent,
  TooltipComponent,
  LegendComponent,
  TitleComponent,
]);

const systemInfo = ref();
const userStats = ref({
  todayNewUsers: 0,
  activeUsers: 0,
  todayPosts: 0,
});
const contentStats = ref({
  todayPosts: 0,
  todayComments: 0,
  todayLikes: 0,
});
const systemStats = ref({
  visits: 0,
  avgResponseTime: 0,
  onlineUsers: 0,
});

const userActivityOption = ref({
  title: {
    text: '用户活跃度趋势',
  },
  tooltip: {
    trigger: 'axis',
  },
  xAxis: {
    type: 'category',
    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
  },
  yAxis: {
    type: 'value',
  },
  series: [
    {
      name: '活跃用户',
      type: 'line',
      data: [120, 132, 101, 134, 90, 230, 210],
    },
  ],
});

const contentTrendOption = ref({
  title: {
    text: '内容发布趋势',
  },
  tooltip: {
    trigger: 'axis',
  },
  xAxis: {
    type: 'category',
    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
  },
  yAxis: {
    type: 'value',
  },
  series: [
    {
      name: '发帖数',
      type: 'bar',
      data: [10, 15, 8, 12, 9, 20, 18],
    },
  ],
});

const systemPerformanceOption = ref({
  title: {
    text: '系统性能监控',
  },
  tooltip: {
    trigger: 'axis',
  },
  xAxis: {
    type: 'category',
    data: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00', '24:00'],
  },
  yAxis: {
    type: 'value',
  },
  series: [
    {
      name: '响应时间',
      type: 'line',
      data: [120, 132, 101, 134, 90, 230, 210],
    },
  ],
});

const load = async () => {
  try {
    // 获取系统信息
    systemInfo.value = await axios.get('/api/admin/common/system_info');
    
    // 获取统计数据
    const response = await axios.get('/api/admin/stats');
    userStats.value = response.data.userStats;
    contentStats.value = response.data.contentStats;
    systemStats.value = response.data.systemStats;

    // 获取用户活跃度趋势
    const userActivityResponse = await axios.get('/api/admin/stats/user-activity');
    userActivityOption.value.xAxis.data = userActivityResponse.data.dates;
    userActivityOption.value.series[0].data = userActivityResponse.data.counts;

    // 获取内容发布趋势
    const contentTrendResponse = await axios.get('/api/admin/stats/content-trend');
    contentTrendOption.value.xAxis.data = contentTrendResponse.data.dates;
    contentTrendOption.value.series[0].data = contentTrendResponse.data.postCounts;

    // 获取系统性能数据
    const systemPerformanceResponse = await axios.get('/api/admin/stats/system-performance');
    systemPerformanceOption.value.xAxis.data = systemPerformanceResponse.data.times;
    systemPerformanceOption.value.series[0].data = systemPerformanceResponse.data.responseTimes;
  } catch (error) {
    console.error('Failed to load stats:', error);
  }
};

onMounted(() => {
  load();
});
</script>

<style lang="less" scoped>
.dashboard {
  margin: 20px;
  display: flex;
  flex-direction: column;
  row-gap: 20px;

  font-size: 14px;
  line-height: 1.8;

  .attr {
    display: flex;
    align-items: center;
    column-gap: 10px;
    font-size: 14px;
    .attr-name {
      color: var(--color-text-1);
    }
    span.attr-value {
      color: var(--color-text-2);
    }
    a.attr-value {
      color: rgb(var(--arcoblue-6));
    }
  }

  .dashboard-card {
    .card-content {
      display: flex;
      justify-content: space-around;
      margin-bottom: 20px;

      .stat-item {
        text-align: center;
        padding: 10px;

        .stat-title {
          font-size: 14px;
          color: var(--color-text-2);
          margin-bottom: 8px;
        }

        .stat-value {
          font-size: 24px;
          font-weight: bold;
          color: var(--color-text-1);
        }
      }
    }

    .chart-container {
      height: 300px;
      
      .chart {
        height: 100%;
      }
    }
  }
}
</style>
